<template>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 py-2 gap-4 md:gap-2 gva-container2">
    <gva-card custom-class="col-span-1 h-32">
      <gva-chart :type="1" :PersonalUserNum="userTotalInfo.PersonalUserNum" title="个人用户数" />
    </gva-card>
    <gva-card custom-class="col-span-1 h-32">
      <gva-chart :type="2" :CompanyUserNum="userTotalInfo.CompanyUserNum" :percentChange="percentChange" title="企业用户数" />
    </gva-card>
    <gva-card custom-class="col-span-1 h-32">
      <gva-chart :type="3" :ExceptUserNum="userTotalInfo.ExceptUserNum" :percentChange="percentChange" title="异常用户数" />
    </gva-card>
    <gva-card custom-class="col-span-1 h-32">
      <gva-chart :type="4" :UserDataAmount="dataTotalInfo.UserDataAmount" :percentChange="percentChange" title="用户数据量" />
    </gva-card>
    <div class="col-span-1 lg:col-span-4 flex flex-wrap gap-4">
      <gva-card custom-class="flex-1 h-42">
        <gva-chart :type="7" :barData="barData" title="用户来源统计柱状图" />
      </gva-card>
      <gva-card custom-class="flex-1 h-42">
        <gva-chart :type="6" :pieData="pieData[0]" title="个人/企业比例" />
      </gva-card>
      <gva-card custom-class="flex-1 h-42">
        <gva-chart :type="8" :lineData="lineData" title="各来源用户交易情况条形图" />
      </gva-card>
    </div>
    <gva-card title="" custom-class="col-span-1 md:col-span-2 lg:col-span-4 row-span-2">
      <gva-chart :type="9" />
    </gva-card>
  </div>
</template>

<script setup>
import { gettotalNWYLUserInfo } from '@/api/systemTotal'
import { GvaChart, GvaCard } from "./componenst"
import { onMounted, ref } from "vue";

// Response data fields
const userTotalInfo = ref({
  PersonalUserNum: 0,
  CompanyUserNum: 0,
  ExceptUserNum: 0
});
const dataTotalInfo = ref({
  UserDataAmount: 0
});
const percentChange = ref(0);
const pieData = ref([
  [],
  [],
  []
]);
const barData = ref([]);
const lineData = ref([]);

// Fetch data from API
const fetchData = async () => {
  try {
    const response = await gettotalNWYLUserInfo();
    if (response.data) {
      const data = response.data;
      userTotalInfo.value = {
        PersonalUserNum: data.PersonalUserNum,
        CompanyUserNum: data.CompanyUserNum,
        ExceptUserNum: data.ExceptUserNum
      };
      dataTotalInfo.value = {
        UserDataAmount: data.UserDataAmount
      };

      // Compute percentChange based on data available
      percentChange.value = data.UserDataAmount > 0 ? ((data.UserDataAmount - 100) / 100) * 100 : 0; // example calculation

      // Populate chart data
      pieData.value = [
        { value: data.UserOrigin[0]?.Num || 0, name: '来源一' },
        { value: data.UserOrigin[1]?.Num || 0, name: '来源二' },
        { value: data.UserOrigin[2]?.Num || 0, name: '来源三' }
      ];
      barData.value = data.UserSource || [];
      lineData.value = data.UserTransactions || [];
    } else {
      console.error('Error fetching data:', response.data.msg);
    }
  } catch (error) {
    console.error('Failed to fetch data:', error);
  }
};

// Fetch data on component mount
onMounted(fetchData);
</script>

<style scoped lang="scss">
</style>
